<template>
  <a-list :loading="queryBlogLoadding" class="list-demo-action-layout" :bordered="false" :data="data.items"
    :pagination-props="{ pageSize: blogQueryRequest.page_size, total: data.total }">
    <template #item="{ item }">
      <a-list-item class="list-demo-item" action-layout="vertical">
        <template #actions>
          <span><icon-heart />83</span>
          <span><icon-star />{{ item.id }}</span>
          <span><icon-message />Reply</span>
        </template>
        <template #extra>
          <div className="image-area">
            <img @click="$router.push({ name: 'frontend_blog_detail', query: { id: item.id } })" alt="arco-design"
              width="200" height="120"
              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp" />
          </div>
        </template>
        <a-list-item-meta :title="item.title" :description="item.summary">
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { QUERY_BLOG } from '@/api/blog'

onMounted(() => {
  queryData()
})

// API 请求数据
const blogQueryRequest = reactive({
  keywords: '',
  category: '',
  page_size: 10,
  page_number: 1,
})
// 数据, reactive, 一个一个修改每个属性的值 ({data...})
// ref   data.value = {}
const data = ref({
  items: [],
  total: 0
})

// 查询函数
const queryBlogLoadding = ref(false)
const queryData = async () => {
  try {
    queryBlogLoadding.value = true
    data.value = await QUERY_BLOG(blogQueryRequest)
  } finally {
    queryBlogLoadding.value = false
  }
}
</script>

<style lang="css" scoped></style>
